<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP '5.jsp' starting page</title>
    <link rel="stylesheet" href="<%=path %>/css/demos.css">
    <link rel="stylesheet" href="<%=path %>/css/themes/start/jquery.ui.all.css">
    <style type="text/css">
    	body {
			margin: 0;
			padding: 0;
			text-align: center;
			
		}
		#container{
			margin: 0, auto;
			
		}
		#main{
			background-color: #778899;
			width: 800;
			height: 450;
		}
		#content{
			position: relative;
			background: white;
			height: 420px;
			overflow: auto;
			margin: 10px, 15px;
		}
		
		#replyContent{
			position: inherit;
			padding:15px;
			border-bottom: 1px solid #E8E6E3;
		}
		#textareaContainer{
			position: relative;
			padding-left: 60px;
			padding-right: 20px;
			overflow: hidden;
			zoom: 1;
		}
		#textareaContent{
			display:block;
			float:right;
			width:75%;
			height:70px; 
			line-height:22px;
			overflow:auto; 
			padding:2px 0 2px 6px;
			font-size:12px;
			resize: none;
			border:1px solid #d2ccc0;
			border-top:1px solid #b7b3ac;
			border-left:1px solid #c4c0b8;
			
		}
		#reply{
			display:block;
			float:right;
			height: 70px;
			width: 18%;
			margin-left: 20px;
			margin-right: 20px;
		}
		.chat-reply{
			background-image: url("<%=path%>/image/icon.png");
			background-position: -193px 0;
		}
		.placeholder { color: #aaa; }
		#history{
			font-size: 14px;
			line-height: 1.5;
			overflow: scroll;
		}
		.dialogue{
			clear: both;
			padding-right: 15px;
			min-height: 44px;
			cursor: auto;
			position: relative;
			padding: 10px 10px 10px 15px;
			margin: 0;
			border-bottom: 1px solid #E8E6E3;
			overflow: hidden;
			zoom: 1;
		}		
		.avator{
			float: left;
			width: 40px;
			height: 40px;
			border: 1px solid #CCC;
			background-color: #FFE4E1;
			font-size: 12px;
		}
		.rightpart{
			float: right;
			text-align: right;
			font-size: 12px;
			white-space: nowrap;
			overflow: hidden;
			line-height: 1.5;
			font-family: "lucida Grande",Verdana;
		}
		.dialogue_ctime{
			display:block;
			margin-bottom:6px;
			white-space: nowrap;
			color: #A0A0A0;
			cursor: default;
		}
		.dialogueP{
			margin: 0 60px 0 52px;
			white-space: normal;
			line-height: 22px;
			word-break:break-all;
			word-wrap:break-word;
			word-spacing:3px;
			font-size: 13px;
			text-align: left;
			cursor: auto;
		}
		
		
	</style>
    
    
    <script type="text/javascript" src="<%=path %>/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="<%=path %>/js/jquery.placeholder.js"></script>
    <script type="text/javascript" src="<%=path%>/js/jquery.form.js"></script>
    <script src="<%=path %>/js/ui/jquery.ui.core.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.widget.js"></script>
	<script src="<%=path %>/js/ui/jquery.ui.button.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#textareaContent').placeholder();
			$('#textareaContent').keydown(function(){
    			var length = $('#textareaContent').val().length;
    			if(length >= 120){
    				var temp = $('#textareaContent').val().substr(0,118);
    				$('#textareaContent').val(temp);
    				alert("超出120字数限制");
    			}
    		});
			$('#reply').button();
			$.ajax({
				type: "GET",
				url: "<%=path %>/ajax",
				data: {method: 'queryChatDetail', sessionid: <%=Integer.parseInt(request.getParameter("id"))%>,random: Math.random()},
				dataType: "json",
				success : function(data, textStatus){
					var chat_arr = data;
					if(chat_arr != null){
						$.each(chat_arr, function(i,node){
							$('#history').append(makeChatNode(node.cname,node.id,node.content,node.joinTime));
						});
					}
				},
				error : function(){
					alert("请求失败");
				}
			});
			var options = {
    			dataType : "json",
    			success: showResponse,
    			error: showError
    		};
			$("#form1").submit(function(){
    			var str = $("#textareaContent").val();
    			if(str.replace(/(^\s*)|(\s*$)/g,"") == ""){
    				alert("请输入回复信息！");
    				return false;
    			}
    			var length2 = $('#textareaContent').val().length;
    			if(length2 >= 120){
    				var temp2 = $('#textareaContent').val().substr(0,118);
    				$('#textareaContent').val(temp2);
    				alert("超出120字数限制");
    				return false;
    			}
    			$(this).ajaxSubmit(options); 
    			return false;
    		});
			
		});
		
		function showResponse(responseText, statusText) { 
	    	var ret = responseText;
	    	if(ret == '1'){
	    		//alert("ajax ready");
	    		$.ajax({
					type: "GET",
					url: "<%=path %>/ajax",
					data: {method: 'queryChatDetail', sessionid: <%=Integer.parseInt(request.getParameter("id"))%>, random: Math.random()},
					dataType: "json",
					success : function(data, textStatus){
						$('#history').empty();
						var chat_arr = data;
						if(chat_arr != null){
							$.each(chat_arr, function(i,node){
								$('#history').append(makeChatNode(node.cname,node.id,node.content,node.joinTime));
							});
						}
					},
					error : function(){
						alert("请求失败");
					}
				});
	    	}
	    	$("#form1").resetForm();
	   	}
	   	
	   	function showError(){
	   		alert("请求失败");
	   	}
		
		
		
		
		function makeChatNode(name, id, content, joinTime){
			return $('<div class="dialogue" id="' + id + '"><span class="avator">' + name + '</span><div class="rightpart"><label class="dialogue_ctime">' + joinTime + '</label></div><div class="dialogueP">' + content + '</div></div>');
		}
	</script>
	
	
  </head>
  
  <body>
    <form id="form1" name="form1" method="post" action="<%=path %>/ajax?method=reply&sessionid=<%=Integer.parseInt(request.getParameter("id")) %>" >
    <div id="container">
    	<div id="main">
    		<div id="content">
    			<div id="replyContent">
    				<div id="textareaContainer">
    					<input type="submit" id="reply" value="回 复">
    					<textarea id="textareaContent" name="textareaContent" cols="3" rows="10" placeholder="在这里输入信息后(120字内) 单击右侧回复按钮"></textarea>
    				</div>
    			</div>
    			<div id="history">
    				
    			</div>
    			
    		</div>
    	</div>
    </div>
    </form>
  </body>
</html>
